"""
!/usr/bin/env python
-*- coding: utf-8 -*-
@Author  : MarkJia
@Site    : 
@File    : 9、CSS高级定位.py
"""

"""
css 选择器概念
    css 选择器有自己的语法规则和表达式
    css 定位通常分为绝对定位和相对定位
    和 Xpath 一起常用于 UI 自动化测试中的元素定位
css 相对定位使用场景
    支持web产品  
    支持app的webview产品(非源生控件的页面)
css 语法与实战
    pass
"""

#  ========================    相对定位  ： 可维护性强 语法更加简洁  解决各种复杂的场景(父子，兄弟定位)  ==============================

"""
1. 调式方法 ： $('css表达式')    ->   $('#locate_id')  或者 $$('css表达式')

2. css基础语法 ： 
标签  标签名   ->  由 <> 括起来的 
类    .class属性值     ->     .el-menu-item    
      遇到中间由空格的，比如：class = 'd-header-wrap ember-view' 需要写成  $('.d-header-wrap.ember-view')
ID    #id属性值        ->     #locate_id
属性   [属性名='属性值']  ->    [name='locate']

3. css 关系定位：页面元素之间的关系
并集        元素1，元素2         ->     $('#ember4,#main')
邻近兄弟     元素 + 元素         ->     $('#main+#hidden-login-form')
兄弟        元素1 ~ 元素2        ->    $('#main~#data-preloaded')
=======================   父子关系     元素>元素    ->    $('#main>#ember4')  ===============================
=======================  后代关系(最常用)  元素 元素    ->    $('#main #ember19')  层级越少越好(两层) =========================

4. css顺序关系  ： ember21下面有 ol  ul(下面有li)  div
父子关系 + 顺序 ：必须是同一个爸爸（找到爸爸的第几个孩子）      元素1 元素2    
                        ->   $('#ember21>ul>li:nth-child(2)')  找到li爸爸ul的第2个 li 孩子
                             $('#ember21>:nth-child(1)')       找到ember21的第一个孩子
                                                                  
父子关系 + 标签类型（子标签下的孩子）     元素1 元素2     
                        ->   $('#ember21>ol:nth-of-type(1)')    找到ol标签的第1个元素
"""
